Angular Material এবং Angular Forms এর মধ্যে ইন্টিগ্রেশন ব্যবহার করে আপনি খুবই ইন্টারঅ্যাকটিভ এবং ইউজার-বান্ধব ফর্ম তৈরি করতে পারেন। Angular Forms (Reactive Forms এবং Template-driven Forms) এবং Angular Material (MatInput, MatSelect, MatCheckbox, MatRadio, MatDatepicker) কম্পোনেন্ট ব্যবহার করে ফর্মগুলোর সাথে ইন্টারঅ্যাকশন, ভ্যালিডেশন এবং সাবমিশন ইত্যাদি আরও কার্যকরী এবং সহজ করা যায়।

এছাড়া, Angular Services এর সাথে ইন্টিগ্রেশন ব্যবহার করে আপনি ডেটা এক্সেস, API কল এবং ডেটা সঞ্চয় করার কার্যক্রমও সহজে সম্পাদন করতে পারেন। চলুন দেখি Angular Forms এবং Services এর সাথে Material Components এর ইন্টিগ্রেশন কিভাবে কাজ করে।

১. প্রাথমিক প্রস্তুতি

প্রথমে, আপনার app.module.ts ফাইলে প্রয়োজনীয় Angular Material এবং FormsModule ইমপোর্ট করতে হবে:

মডিউল ইমপোর্ট করা

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    BrowserModule,
    MatInputModule,
    MatButtonModule,
    MatFormFieldModule,
    MatSelectModule,
    ReactiveFormsModule,
    FormsModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

২. Angular Reactive Forms এর সাথে Angular Material ইনপুট কম্পোনেন্ট

এখন, আমরা একটি Reactive Form তৈরি করব যেখানে MatInput কম্পোনেন্ট ব্যবহার করব। এই উদাহরণে আমরা ব্যবহারকারীর নাম এবং ইমেইল ইনপুট নেবো।

HTML টেমপ্লেট:

<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <mat-form-field appearance="fill">
    <mat-label>Username</mat-label>
    <input matInput formControlName="username" required>
  </mat-form-field>

  <mat-form-field appearance="fill">
    <mat-label>Email</mat-label>
    <input matInput formControlName="email" required>
  </mat-form-field>

  <button mat-raised-button color="primary" type="submit" [disabled]="userForm.invalid">Submit</button>
</form>

টাইপস্ক্রিপ্ট কোড:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  userForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.userForm = this.fb.group({
      username: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  onSubmit() {
    console.log(this.userForm.value);
  }
}

এখানে:

• ReactiveFormsModule ব্যবহার করা হয়েছে যা FormGroup এবং FormControl এর মাধ্যমে ফর্ম কন্ট্রোল এবং ভ্যালিডেশন ম্যানেজ করে।
• MatInput কম্পোনেন্ট ব্যবহার করে ফর্মের ইনপুট ফিল্ড তৈরি করা হয়েছে।
• Validators.required এবং Validators.email দিয়ে ইনপুট ভ্যালিডেশন করা হয়েছে।

৩. Angular Services এর সাথে Angular Material ইন্টিগ্রেশন

Angular Services ব্যবহার করে আপনি ফর্ম ডেটা একটি API এ পাঠাতে পারেন অথবা স্থানীয়ভাবে ডেটা সংরক্ষণ করতে পারেন। এখানে, আমরা HttpClientModule ব্যবহার করে ফর্ম সাবমিটের সময় ডেটা একটি সার্ভিসে পাঠাবো।

১. সার্ভিস তৈরি করা

প্রথমে একটি সার্ভিস তৈরি করুন যেটি API কল বা ডেটা ম্যানেজমেন্ট করবে।

ng generate service user

এখন user.service.ts ফাইলে একটি API কল যোগ করুন:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  private apiUrl = 'https://jsonplaceholder.typicode.com/users';  // উদাহরণ API

  constructor(private http: HttpClient) { }

  saveUser(userData: any): Observable<any> {
    return this.http.post(this.apiUrl, userData);
  }
}

২. ফর্ম সাবমিট করার সময় সার্ভিসে ডেটা পাঠানো

এখন, onSubmit() ফাংশনে ফর্ম ডেটা UserService এ পাঠাতে হবে:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { UserService } from './user.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  userForm: FormGroup;

  constructor(private fb: FormBuilder, private userService: UserService) {}

  ngOnInit() {
    this.userForm = this.fb.group({
      username: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  onSubmit() {
    if (this.userForm.valid) {
      this.userService.saveUser(this.userForm.value).subscribe(response => {
        console.log('User saved successfully:', response);
      });
    }
  }
}

এখানে:

• UserService এর saveUser() মেথডটি HttpClient ব্যবহার করে API এ POST রিকোয়েস্ট পাঠাচ্ছে।
• ফর্মটি সাবমিট হলে ডেটা সার্ভিসে পাঠানো হবে।

৩. HttpClientModule ইমপোর্ট করা

HttpClientModule ইমপোর্ট করতে হবে যাতে আপনি HTTP রিকোয়েস্ট করতে পারেন।

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule
  ]
})
export class AppModule {}

৪. ফর্মের ভ্যালিডেশন এবং সার্ভিস থেকে রেসপন্স

Material Snackbar ব্যবহার করে আপনি সফল সাবমিশন বা ত্রুটি বার্তা প্রদর্শন করতে পারেন।

HTML টেমপ্লেট:

<mat-snack-bar></mat-snack-bar>

টাইপস্ক্রিপ্ট কোড:

import { MatSnackBar } from '@angular/material/snack-bar';

constructor(private fb: FormBuilder, private userService: UserService, private snackBar: MatSnackBar) {}

onSubmit() {
  if (this.userForm.valid) {
    this.userService.saveUser(this.userForm.value).subscribe(response => {
      this.snackBar.open('User saved successfully!', 'Close', { duration: 2000 });
    }, error => {
      this.snackBar.open('Error saving user', 'Close', { duration: 2000 });
    });
  }
}

এখানে MatSnackBar ব্যবহার করে সাবমিশন সফল বা ব্যর্থ হলে ব্যবহারকারীর জন্য একটি স্ন্যাকবার (স্মল নোটিফিকেশন) প্রদর্শন করা হয়।

Angular Material এর ফর্ম কম্পোনেন্টের সাথে Reactive Forms এবং Angular Services এর ইন্টিগ্রেশন আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং কার্যকরী করে তোলে। MatInput, MatSelect, এবং MatButton এর মতো Material কম্পোনেন্ট ব্যবহার করে আপনি ফর্ম তৈরি করতে পারেন, এবং UserService এর মাধ্যমে API বা সার্ভিসে ডেটা পাঠাতে পারেন। Angular Material এবং Angular Services এর এই শক্তিশালী ইন্টিগ্রেশন ডেভেলপারদের আরও উন্নত এবং প্রোডাকটিভ ফর্ম অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে।